<script setup lang="ts">
import { ref, nextTick } from 'vue'
import Department from '@/api/department'
import { ListToTree } from '@/utils/listToTree'
import { ArrowDown } from '@element-plus/icons-vue'
import AddDep from './components/AddDep.vue'

const departments = ref([] as any)
const defaultProps = {
  children: 'children', // 读取子节点的字段名
  label: 'label' // 显示的字段名
}
const showDialog = ref(false)

const getDepartment = async () => {
  const res: any = await Department.getDepartmentService()
  departments.value = ListToTree(res, 0)
  // console.log(res)
  // console.log(departments.value)
}
getDepartment()

// 操作部门方法
const addDepRef = ref()
const currentNodeId = ref<number>()
const HandleCommand = (key: string, id: number) => {
  if (key === 'add') {
    // 添加子部门
    showDialog.value = true // 显示弹层
    currentNodeId.value = id
  } else if (key == 'edit') {
    // 编辑部门
    showDialog.value = true // 显示弹层
    currentNodeId.value = id
    // 更新props，异步动作
    // 直接调用子组件方法，同步动作
    // 父组件调用子组件方法获取数据
    // nextTick等待上一步渲染完成后，执行回调
    nextTick(() => {
      addDepRef.value.getDepartmentDetail()
    })
  } else {
    // 删除部门
    ElMessageBox.confirm('确认要删除该部门?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(async () => {
        await Department.deleteDepartmentService(id)
        getDepartment()
        ElMessage({
          type: 'success',
          message: '删除成功'
        })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '删除取消'
        })
      })
  }
}
</script>

<template>
  <div class="container">
    <div class="app-container">
      <!-- 树形结构 -->
      <el-tree
        :data="departments"
        :props="defaultProps"
        node-key="id"
        default-expand-all
        :expand-on-click-node="false"
      >
        <!-- 节点结构 -->
        <template #default="{ node, data }">
          <span class="custom-tree-node">
            <span>{{ data.name }}</span>
            <span>
              <a>{{ data.managerName }} </a>
              <el-dropdown @command="HandleCommand($event, data.id)" style="margin-left: 30px">
                <!-- 显示区域内容 -->
                <span class="el-dropdown-link">
                  操作
                  <el-icon><ArrowDown /></el-icon>
                </span>
                <!-- 下拉菜单选项 -->
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item command="add">添加子部门</el-dropdown-item>
                    <el-dropdown-item command="edit">编辑部门</el-dropdown-item>
                    <el-dropdown-item command="delete">删除</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </span>
          </span>
        </template>
      </el-tree>
    </div>
    <!-- 放置弹层 -->
    <!-- vue2中.sync接收子组件的值，vue3中移除 -->
    <add-dep
      ref="addDepRef"
      @update:show-dialog="showDialog = $event"
      @update-dep="getDepartment"
      :currentNodeId="currentNodeId"
      :show-dialog="showDialog"
    ></add-dep>
  </div>
</template>

<style lang="scss" scoped>
.app-container {
  padding: 30px 140px;
  font-size: 14px;
}
.tree-manager {
  width: 50px;
  display: inline-block;
  margin: 10px;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
